<template>
  <ElForm class="shop-item" label-width="100px" label-position="left">
    <div class="shop-item-header">
      <div class="shop-item-title">
        <div class="shop-item-tag">{{ getFeeModel(data.feeModel) }}</div>
        <div>{{ data.shopName }}</div>
      </div>
      
      <div>
        <ElButton type="primary" link @click="$emit('edit')">编辑</ElButton>
        <ElButton type="primary" link @click="$emit('remove')">删除</ElButton>
      </div>
    </div>

    <ElRow>
      <ElCol :span="6">
        <ElFormItem label="合作状态">{{ getCooperateStatus(data.cooperateStatus) }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="平台">{{ data.platformName }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="店铺类型">{{ data.shopTypeName }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="店铺地址"></ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label="营销类型">{{ data.marketTypeName }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="拓客渠道">{{ data.expandTypeName }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="店铺链接">{{ data.shopLinkUrl }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="开始日期">{{ data.startDate }}</ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label="截止日期">{{ data.endDate }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="剔除退款">{{ getExcludingRefunds(data.excludingRefunds) }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="客服类型">{{ data.customTypeName }}</ElFormItem>
      </ElCol>
      <ElCol :span="6"> 
        <ElFormItem label="服务班次">{{ data.serviceShiftName }}</ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label="底薪">{{ data.baseSalary }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="提成">{{ data.commission }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="转化率">{{ data.conversionRate }}</ElFormItem>
      </ElCol>
      <ElCol :span="6"> 
        <ElFormItem label="响应时间">{{ data.responseSecond }}</ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label="咨询人数">{{ data.consultPeopleNum }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="联系人姓名">{{ data.contacts }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="联系方式 ">
          <div v-if="data.phone">手机/{{ data.phone }}</div>
          <div v-if="data.wechat">微信/{{ data.wechat }}</div>
          <div v-if="data.qq">QQ/{{ data.qq }}</div>
          <div v-if="data.ding">钉钉/{{ data.ding }}</div>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6"> 
        <ElFormItem label="客户配合度">{{ data.fitRatioName }}</ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label="特别备注">{{ data.customerServiceMessage }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="备注">{{ data.remark }}</ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label="悦清风的客户">{{ data.shopTypeName }}</ElFormItem>
      </ElCol>
      <ElCol :span="6"> 
        <ElFormItem label="店铺对接人">{{ data.storeLiaison }}</ElFormItem>
      </ElCol>
    </ElRow>
  </ElForm>
</template>

<script setup lang="ts">
import { ElButton, ElRow, ElCol, ElForm, ElFormItem } from 'element-plus'
import { feeModelOptions, cooperateStatusOptions, excludingRefundsOptions } from '../constant'
interface Props {
  data: object
}

const props = withDefaults(defineProps<Props>(), {
  data: () => ({})
})

const data = props.data as any

const getFeeModel = (val) => {
  const d = feeModelOptions.find(v => v.value === val)
  return d && d.label
}

const getCooperateStatus = (val) => {
  const d = cooperateStatusOptions.find(v => v.value === val)
  return d && d.label
}

const getExcludingRefunds = (val) => {
  const d = excludingRefundsOptions.find(v => v.value === val)
  return d && d.label
}
</script>

<style scoped lang="scss">
.shop-item {
  padding-top: 18px;
  margin-bottom: 18px;
  & + & {
    border-top: 1px solid #E1E1E1;;
  }
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &-title {
    display: flex;
    align-items: center;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
  }
  &-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 22px;
    background: #094DB2;
    border-radius: 2px;
    font-family: PingFangHK-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    text-align: right;
    margin-right: 5px;
  }

  :deep(.el-form-item__label) {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    text-align: right;
  }
  :deep(.el-form-item__content) {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 12px;
    color: #333333;
  }
}
</style>
